<template>
  <div class="page-container">
    <!-- 顶部导航 -->
    <nav class="main-nav">
      <div class="nav-content">
        <a href="javascript:void(0)">首页</a>
        <a href="javascript:void(0)">协会简介</a>
        <a href="javascript:void(0)">艺术展厅</a>
        <a href="javascript:void(0)">会员中心</a>
        <a href="javascript:void(0)">联系我们</a>
      </div>
    </nav>

    <!-- 轮播图 -->
    <div class="carousel">
      <transition-group name="slide">
        <div v-for="(slide, index) in slides" 
             :key="slide.id"
             v-show="currentSlide === index"
             class="carousel-item">
          <img :src="slide.image" :alt="slide.title"> 
        </div>
      </transition-group>
      
      <!-- 轮播图指示器 -->
      <div class="carousel-indicators">
        <span v-for="(slide, index) in slides"
              :key="slide.id"
              :class="{ active: currentSlide === index }"
              @click="setSlide(index)">
        </span>
      </div>
      
      <!-- 前后按钮 -->
      <button class="carousel-button prev" @click="prevSlide">&lt;</button>
      <button class="carousel-button next" @click="nextSlide">&gt;</button>
    </div>

    <div class="home">
      <!-- 公告和咨询区域 -->
      <div class="info-section">
        <!-- 公告区域 -->
        <section class="announcements">
          <div class="section-header">
            <span class="active">要闻速递</span>
          </div>
          <div class="announcement-list">
            <div v-for="(announcement, index) in announcements" 
                 :key="index" 
                 class="announcement-item">
              <span class="title">{{ announcement.title }}</span>
              <span class="date">{{ announcement.date }}</span>
            </div>
          </div>
        </section>

        <!-- 协会咨询 -->
        <section class="consultation">
          <div class="section-header">
            <span class="active">工作动态</span>
          </div>
          <div class="consultation-list">
            <div v-for="(item, index) in consultationItems" 
                 :key="index" 
                 class="consultation-item">
              <span class="title">{{ item.title }}</span>
              <span class="date">{{ item.date }}</span>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- 底部信息 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-links">
            <a href="javascript:void(0)" class="social-icon">
              <img src="../assets/imgs/weichat.png" alt="微信">
            </a>
            <a href="javascript:void(0)" class="social-icon">
              <img src="../assets/imgs/webo.png" alt="微博">
            </a>
          </div>
        </div>

        <div class="footer-section">
          <h3>协会向导</h3>
          <ul>
            <li><a href="javascript:void(0)">教育培训中心</a></li>
            <li><a href="javascript:void(0)">联系我们</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>帮助中心</h3>
          <ul>
            <li><a href="javascript:void(0)">自动服务</a></li>
            <li><a href="javascript:void(0)">相关下载</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>联系我们</h3>
          <ul class="contact-list">
            <li>工作日09:00AM --18:00PM</li>
            <li>hyb@acya.org.cn（会员部）</li>
            <li>admin@acya.org.cn（秘书处）</li>
            <li>+86-(027)51233855</li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import lbt1 from '../assets/imgs/lbt1.jpg'
import lbt2 from '../assets/imgs/lbt2.jpg'
import lbt3 from '../assets/imgs/lbt3.jpg'

export default {
  name: 'HomeView',
  data() {
    return {
      currentSlide: 0,
      slides: [
        {
          id: 1,
          title: '艺术展览',
          description: '2024年春季艺术展览',
          image: lbt1
        },
        {
          id: 2,
          title: '艺术交流',
          description: '国际艺术交流活动',
          image: lbt2
        },
        {
          id: 3,
          title: '艺术教育',
          description: '青年艺术家培养计划',
          image: lbt3
        }
      ],
      announcements: [
        {
          date: '2024-12-17',
          title: '关于会员证补办的通知'
        },
        {
          date: '2024-10-17',
          title: '2024年会员会籍登记时间安排通知'
        },
        {
          date: '2024-03-12',
          title: '入会规定调整'
        },
        {
          date: '2024-09-28',
          title: '青少年美术比赛规则更新'
        },
        {
          date: '2024-07-15',
          title: '暑期美术创作营即将开始'
        },
        {
          date: '2024-05-20',
          title: '会员作品展示活动通知'
        },
        {
          date: '2024-02-05',
          title: '寒假美术培训课程安排'
        }

    
      ],
      galleryItems: [
        {
          title: '中国美术家协会花鸟',
          image: '/images/gallery1.jpg'
        },
        {
          title: '中国美术家协会贾国英作品',
          image: '/images/gallery2.jpg'
        }
      ],
      consultationItems: [
        {
          date: '2024-03-15',
          title: '关于艺术创作补助申请的咨询'
        },
        {
          date: '2024-03-10',
          title: '青年艺术家培训项目咨询'
        },
        {
          date: '2024-03-05',
          title: '会员资格认证相关问题'
        }
      ]
    }
  },
  mounted() {
    this.startSlideShow()
  },
  beforeUnmount() {
    this.stopSlideShow()
  },
  methods: {
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.slides.length
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length
    },
    setSlide(index) {
      this.currentSlide = index
    },
    startSlideShow() {
      this.slideInterval = setInterval(this.nextSlide, 5000) // 5秒切换一次
    },
    stopSlideShow() {
      clearInterval(this.slideInterval)
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-nav {
  width: 100%;
  background-color: #000000;
  padding: 0;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.main-nav a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 20px;
}

.main-nav a:hover {
  color: #1890ff;
}

.home {
  max-width: 1400px;
  margin: 0 auto;
  flex: 1;
}

.info-section {
  display: flex;
  gap: 40px;
  margin: 40px 0;
}

.announcements, .consultation {
  flex: 1;
  background: #fff;
}

.section-header {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.section-header span {
  padding: 10px 30px;
  cursor: pointer;
  position: relative;
  color: #666;
  font-size: 16px;
}

.section-header span.active {
  color: #333;
  font-weight: bold;
  min-width: 120px;
  text-align: center;
}

.announcement-list, .consultation-list {
  display: flex;
  flex-direction: column;
}

.announcement-item, .consultation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 30px;
}

.announcement-item .title,
.consultation-item .title {
  flex: 1;
  color: #333;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}

.announcement-item .date,
.consultation-item .date {
  color: #999;
  font-size: 12px;
}

.announcement-item:hover .title,
.consultation-item:hover .title {
  color: #1890ff;
  cursor: pointer;
}

/* 移除之前的边框和阴影 */
.announcements, .consultation {
  box-shadow: none;
  border-radius: 0;
}

/* 移除之前的标题样式 */
.announcements h2, .consultation h2 {
  display: none;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.footer {
  width: 100%;
  background-color: #1d1d1d;
  color: #ffffff;
  padding: 30px 0;
  margin-top: 40px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.footer-section {
  flex: 1;
  padding: 0 15px;
}

.footer-section h3 {
  color: #cccccc;
  margin-bottom: 15px;
  font-size: 16px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #7d7d7d;
  text-decoration: none;
  font-size: 12px;
}

.footer-section ul li a:hover {
  color: #1890ff;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-icon img {
  width: 28px;
  height: 28px;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.social-icon img:hover {
  opacity: 0.8;
}

.member-query {
  margin-top: 10px;
}

.query-btn {
  display: inline-block;
  padding: 8px 20px;
  background-color: #1d1d1d;
  color: #7d7d7d;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #7d7d7d;
  transition: all 0.3s;
}

.query-btn:hover {
  background-color: #7d7d7d;
  color: #ffffff;
}

.contact-list li {
  color: #7d7d7d;
  font-size: 12px;
  margin-bottom: 8px;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-icon img {
  width: 28px;
  height: 28px;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.social-icon img:hover {
  opacity: 0.8;
}

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.carousel-caption h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-indicators span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicators span.active {
  background-color: white;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s;
}

.carousel-button:hover {
  background: rgba(0,0,0,0.8);
}

.carousel-button.prev {
  left: 20px;
}

.carousel-button.next {
  right: 20px;
}

/* 轮播图过渡效果 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

.slide-enter-to,
.slide-leave-from {
  transform: translateX(0);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .info-section {
    flex-direction: column;
    gap: 20px;
  }
}
</style>